<template>
  <Row class="iot-wrapper">
    <Row style="padding:10px 20px;font-size:14px;">
      <Row>
        <i-col span="5">
          <span class="label-span">所属企业：</span>
          <Select class="label-form" v-model="searchParams.companyId">
            <Option v-for="(item, index) in companyList" :key="index" :value="item.id">{{item.name}}</Option>
          </Select>
        </i-col>
        <i-col span="5">
          <span class="label-span">设备名称：</span>
          <Select class="label-form">
            <Option v-for="(item, index) in deviceList" :key="index" :value="item.id">{{item.nickName}}</Option>
          </Select>
        </i-col>
        <i-col span="5">
          <span class="label-span">参数名称：</span>
          <Select class="label-form">
            <Option>123</Option>
          </Select>
        </i-col>
        <i-col span="7">
          <span>查询时间：</span>
          <Select class="label-form">
            <Option>123</Option>
          </Select>
        </i-col>
        <i-col span="2">
          <Button type="primary">查询</Button>
        </i-col>
      </Row>
    </Row>
    <Col class="iot-wrapper-table" span="24">
    <Table :data="[]" :columns="columns" border :loading="loading">
    </Table>
    </Col>
    <Col class="panel page-panel cf" style="margin-top:10px;">
    <Page :total="pageInfo.total" show-total :current.sync="pageInfo.page" class="fr" @on-change="switchThePaging" :page-size="20"></Page>
    </Col>
  </Row>
</template>
<script>
import {
  iotDeviceHistoryData,
  getIotDdeviceListByCompany,
  getIotCompanyList
} from '@/api'
export default {
  async mounted() {
    await this.getCompanyList()
    await this.getDeviceList()
  },
  data() {
    const moment = this.moment
    const timeArr = [
      moment()
        .add(-4, 'days')
        .format(),
      moment().format()
    ]
    return {
      columns: [
        {
          title: 'Iot Id',
          align: 'center'
        },
        {
          title: '设备ID',
          align: 'center'
        },
        {
          title: '设备名称',
          align: 'center'
        },
        {
          title: '所属产品',
          align: 'center'
        },
        {
          title: '所属企业',
          align: 'center'
        },
        {
          title: '设备位置',
          align: 'center'
        },
        {
          title: '报警状态',
          align: 'center'
        },
        {
          title: '在线状态',
          align: 'center'
        },
        {
          title: '更新时间',
          align: 'center'
        },
        {
          title: '操作',
          align: 'center',
          render(h, row) {}
        }
      ],
      loading: false,
      deviceList: [],
      companyList: [],
      pageInfo: {
        page: 1,
        total: 0
      },
      timeArr,
      searchParams: {
        companyId: '',
        deviceId: '',
        type: ''
      }
    }
  },
  methods: {
    async init() {
      // const {code,data} =  await
    },
    /**
     * 企业列表
     */
    async getCompanyList() {
      const vm = this
      const { code, data } = await getIotCompanyList()
      if (code === 200) {
        vm.companyList = data
        if (data.length > 0) {
          this.searchParams.companyId = data[0].id
        }
      }
    },

    /**
     * 设备列表
     */
    async getDeviceList() {
      const params = { companyId: this.searchParams.companyId }
      const { data, code } = await getIotDdeviceListByCompany(params)
      if (code === 200) {
        this.deviceList = data
      }
    },
    switchThePaging() {}
  }
}
</script>

<style lang="scss" scoped>
.iot-wrapper {
  background: #fff;
  .label-span {
    display: inline-block;
    width: 75px;
  }
  .label-form {
    width: calc(100% - 100px) !important;
  }
  &-table {
    box-sizing: border-box;
    padding: 10px;
  }
}
</style>
